<template>
	<view class="main">
	<u-navbar :is-back="false" :title="i18n.navbar.mall" :background="background" :border-bottom="false">
		<view class="navright" slot="right">
			<image src="../../../static/images/sx.png" mode="" @click="showscreen"></image>
		</view>
	</u-navbar>
	<scroll-view   class="storehouse" scroll-y :style="{'height':vHeight + 'px'}" @scrolltolower="reachBottom">
		<view class="all">
			<view class="storehouse">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>淘宝</text>
						
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'上架':'未上架'}}</text>
									<text class="instock">{{i18n.mall.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="join_del" @click="showmodel(item.id)">
								{{i18n.mall.listed}}
							</view>
							<view class="details" @click="router(item.id)">
								{{i18n.mall.details}}
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
	</scroll-view>
	<u-popup v-model="screen" width="570" mode="right">
		<view class="showright">
			<view class="scree_tit">
				{{i18n.mall.Filter_tit}}
			</view>
			<view class="smtit">
					{{i18n.mall.PCategories}}
			</view>
			<view class="selects" @click="select">
				<text>{{pctype==''?i18n.mall.please_choose:pctype}}</text>
				<image src="../../../static/images/right.png" mode="aspectFit"></image>
			</view>
			
			<view class="smtit">
				{{i18n.mall.product_search}}
			</view>
			<view class="selects">
				<input type="text" :placeholder="i18n.mall.placeholder" v-model="keywords" />
			</view>
	
			<view class="rightbut">
				<view class="rightconfim" @click="rest">
					{{i18n.mall.reset}}
				</view>
				<view class="rightoff" @click="confirmlist">
					{{i18n.mall.confirm}}
				</view>
			</view>
		</view>
	</u-popup>
	<u-popup v-model="del" mode="center" width="600" height="380" border-radius="20">
		<view class="mdtitle">
			{{i18n.commodity.commodity_details.tips}}
		</view>
		<text class="wb">{{txt}}</text>
		<view class="mdbuts">
			<view class="but_l" @click="putshop">
				确定
			</view>
			<view class="but_r" @click="no">
				取消
			</view>
		</view>
	</u-popup>
		<u-select v-model="shoptype" mode="mutil-column-auto" :list="treelist" value-name="id" label-name="name"
			child-name="childList" @confirm="confirm2"></u-select>
<!-- 		<view class="buttons">
			{{i18n.mall.one_key}}
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				screen:false,
				shoplist:[],
				del:false,
				txt:'',
				mallid:'',
				shoptype:false,
				treelist:[],
				pctype:'',
				keywords:'',
				categoryId:'',
				vHeight: 450,
				currentPage: 0,
				totalPage: 0,
			}
		},
		onLoad() {
console.log(this.i18n.mall.please_choose);
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang()
			this.repeatmethod()
			uni.getSystemInfo({
				success: (res) => {
					this.vHeight = res.windowHeight - 95;
					console.log(res.windowHeight);
				}
			});
		},
		methods: {
			repeatmethod(){
				this.shoplist = [];
				this.currentPage = 0;
				this.totalPage = 0;
				this.getshoplist()
				this.getbrandtype()
			},
			select(){
				this.shoptype=true
			},
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			reachBottom() {
				this.getshoplist();
			},
			//重置
			rest(){
				this.getshoplist()
				this.pctype=''
				this.categoryId = ''
				this.keywords = ''
			},
			// 确定选择
			confirm2(e){
					this.pctype = e[2].label
				this.categoryId = e[2].value
			},
			//确定
			confirmlist() {
			global.$http.request({
				url: '/api/admin/merchant/product/wholesaleList',
				method: 'GET',
				header: {
					'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
				},
				data:{
					categoryId:this.categoryId,
					keywords:this.keywords,
					page:this.currentPage+1,
				}
			}).then(res => {
				if (res.data.code == 200) {
					console.log(res.data.data);
					this.shoplist=res.data.data.list
				}
			})
			},
			//获取平台商品分类
			getbrandtype() {
				global.$http.request({
					url: '/api/admin/merchant/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.treelist = res.data.data
			
						// console.log('商户分类', res.data.data);
						var that = this
						for (let i = 0; i < res.data.data.length; i++) {
							for (let j = 0; j < res.data.data[i].childList.length; j++) {
								for (let k = 0; k < res.data.data[i].childList[j].childList.length; k++) {
								
										// this.pctype = res.data.data[i].childList[j].childList[k].name
										// console.log(res.data.data[i].childList[j].childList[k].id);
								}
							}
						}
					}
				})
			},
			//显示筛选列表
			showscreen(){
				this.screen=true
			},
			//详情页
			router(id){
				uni.navigateTo({
					url:'../mall_details/mall_details?id='+id
				})
			},
			showmodel(id){
				this.txt=this.i18n.mall.pstitle
				this.mallid=id
				this.del=true
			},
			// 获取全部批发商品
			getshoplist(){
		console.log('kaishi',this.currentPage);
				if(this.currentPage>0 && this.totalPage>0 && this.currentPage>=this.totalPage){
							console.log('qian',this.currentPage);
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/product/wholesaleList',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						page: this.currentPage+1,
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.shoplist = this.shoplist.concat(res.data.data.list);
						this.currentPage = res.data.data.page;
						this.totalPage = res.data.data.totalPage;
					}
				})
			},
			
			// /api/admin/merchant/product/wholesaleSave/{id}  一键上架上架
			putshop(){
				this.del=false
				global.$http.request({
					url: '/api/admin/merchant/product/wholesaleSave/'+this.mallid,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						uni.showToast({
							title:res.data.message,
							icon:'none',
							duration:1000
						})
						var that=this 
						setTimeout(function(){
							that.getshoplist()
						},1000)
					}
				})
			},
			//取消按钮
			no(){
				this.del=false
			},
		
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;
padding-bottom: 100rpx;
		.main {
			width: 750rpx;
			
			.navright {
				padding-right: 30rpx;
			
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.all{
				.storehouse {
					margin-top: 11rpx;
					.allhouse {
						background-color: #fff;
						.housetop {
							display: flex;
							justify-content: space-between;
							width: 750rpx;
							background: #666666;
							padding: 22rpx 43rpx 22rpx 26rpx;
				
							.sort {
								padding-left: 65rpx;
							}
				
							text {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
				
						.shop {
				
				
							.shop_top {
								padding: 18rpx 42rpx 41rpx 25rpx;
								width: 750rpx;
								display: flex;
								border-bottom: 2rpx solid #f7f7f7;
								// padding-bottom: 34rpx;
				
								.shop_l {
									image {
										width: 180rpx;
										height: 180rpx;
									}
								}
				
								.shop_r {
									width: 500rpx;
									padding-left: 25rpx;
				
									.title {
										width: 100%;
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #000000;
									}
				
									.styles {
										display: flex;
										justify-content: space-between;
										align-items: center;
										padding: 25rpx 0 21rpx 0;
				
										.status {
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 400;
											color: #FF0707;
				
										}
				
										.instock {
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 400;
											color: #616161;
										}
									}
				
									.money {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #010101;
									}
								}
							}
				
							.shop_bottom {
								padding: 16rpx 0;
								display: flex;
								justify-content: space-between;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								margin: 0 50rpx 0 25rpx;
				
								.join_del {
									width: 410rpx;
									height: 48rpx;
									text-align: center;
									line-height: 48rpx;
									background: #304156;
									border-radius: 24rpx;
											color: #FFFFFF;
								}
				
								.details {
									width: 120rpx;
									height: 48rpx;
									line-height: 48rpx;
									text-align: center;
									background: #0F82FF;
									border-radius: 24rpx;
											color: #FFFFFF;
								}
								
							
							}
						}
					}
				}
			}
			.buttons{
				width: 750rpx;
				height: 98rpx;
				background: #304156;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 98rpx;
				position: fixed;bottom: 0;
			}
			
			.showright {
				padding-left: 14rpx;
			
				.scree_tit {
					padding: 78rpx 0 64rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			
				.smtit {
					padding-bottom: 23rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			
				.selects {
					padding: 30rpx 10rpx;
					margin: 0 15rpx 65rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #F0F0F0;
					border-radius: 10rpx;
			
					text {
			
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #B3B3B3;
					}
			
					input {
						// background: #F0F0F0;
						// border-radius: 10rpx;
					}
			
					image {
						width: 10rpx;
						height: 16rpx;
					}
				}
			
				.rightbut {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFang SC;
					line-height: 92rpx;
					text-align: center;
					padding: 0 25rpx;
			
					.rightconfim {
						width: 240rpx;
						height: 92rpx;
						border: 2rpx solid #999999;
						border-radius: 46rpx;
						font-weight: 400;
						color: #999999;
					}
			
					.rightoff {
						width: 240rpx;
						height: 92rpx;
						background: #304156;
						border-radius: 46rpx;
			
						color: #FFFFFF;
			
					}
				}
			}
			.mdtitle {
				padding-top: 52rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				text-align: center;
			}
			
			.wb {
				display: block;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding: 40rpx 0 59rpx 0;
			}
			
			.mdbuts {
				line-height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: space-around;
				padding: 0 90rpx;
			
				.but_l {
					width: 160rpx;
					height: 64rpx;
					background: #304156;
					border-radius: 32rpx;
				}
			
				.but_r {
					width: 160rpx;
					height: 64rpx;
					background: #B3B3B3;
					border-radius: 32rpx;
				}
			}
			
		}
	}
</style>
